<!--
 * @Author: byron
 * @Date: 2021-10-26 01:21:51
 * @LastEditTime: 2022-02-18 20:24:51
-->

<template>
    <div>
        <page-header
            title="菜单列表"
            describe="当前为超级管理员权限"
        ></page-header>

        <page-layout>
            <div
                class="menu-tree"
                style="padding: 10px; background-color: #fff"
            >
                <vxe-toolbar>
                    <template #buttons>
                        <vxe-button>获取已展开</vxe-button>
                        <vxe-button @click="$refs.xTree.setAllTreeExpand(true)"
                            >展开所有</vxe-button
                        >
                        <vxe-button @click="$refs.xTree.clearTreeExpand()"
                            >关闭所有</vxe-button
                        >
                        <vxe-button
                            style="background-color: #1a91ff; color: #fff"
                            @click="showAddDrawer"
                            >新增菜单</vxe-button
                        >
                    </template>
                </vxe-toolbar>

                <vxe-table
                    border
                    ref="xTree"
                    :tree-config="{
                        transform: true,
                        rowField: 'id',
                        parentField: 'parentId',
                    }"
                    :data="tableData"
                    @toggle-tree-expand="toggleExpandChangeEvent"
                >
                    <vxe-column
                        field="name"
                        title="菜单名称"
                        tree-node
                    ></vxe-column>
                    <vxe-column title="菜单图标">
                        <template #default="{ row }">
                            <p-icon :type="row.icon" />
                        </template>
                    </vxe-column>
                    <vxe-column field="type" title="菜单级别"></vxe-column>
                    <vxe-column field="url" title="组件"></vxe-column>
                    <vxe-column field="sort" title="排序"></vxe-column>
                    <vxe-column title="状态">
                        <template #default="{ row }">
                            <a-tag color="green" v-if="row.isHidden"
                                >启用</a-tag
                            >
                            <a-tag color="orange" v-else>未启用</a-tag>
                        </template>
                    </vxe-column>
                    <vxe-column
                        field="created_on"
                        title="创建时间"
                    ></vxe-column>

                    <vxe-column title="操作" width="80">
                        <template #default="{ row }">
                            <div
                                style="
                                    width: 100%;
                                    display: flex;
                                    justify-content: space-around;
                                    align-items: center;
                                "
                            >
                                <FormOutlined
                                    @click="editMenu(row)"
                                    style="color: #4e8ccf"
                                />
                                <span style="color: #e8eaec">|</span>
                                <DeleteOutlined
                                    @click="delMenu(row)"
                                    style="color: #f18e8e"
                                />
                            </div>
                        </template>
                    </vxe-column>
                </vxe-table>
            </div>
        </page-layout>
        <!-- 抽屉布局 -->
        <a-drawer
            title="编辑菜单"
            :width="720"
            :visible="editDrawer"
            :body-style="{ paddingBottom: '80px' }"
            :footer-style="{ textAlign: 'right' }"
            @close="onCloseEdit"
        >
            <a-form :model="form" :rules="rules" layout="vertical">
                <a-row :gutter="16">
                    <a-col :span="12">
                        <a-form-item label="菜单名称" name="name">
                            <a-input
                                v-model:value="form.name"
                                placeholder="请输入菜单名称"
                            />
                        </a-form-item>
                    </a-col>
                    <a-col :span="12">
                        <a-form-item label="父级菜单" name="url">
                            <a-input
                                v-model:value="form.url"
                                style="width: 100%"
                            />
                        </a-form-item>
                    </a-col>
                </a-row>
                <a-row :gutter="16">
                    <a-col :span="12">
                        <a-form-item label="组件路径" name="url">
                            <a-input
                                v-model:value="form.url"
                                placeholder="请输入组件路径"
                            >
                            </a-input>
                        </a-form-item>
                    </a-col>
                    <a-col :span="12">
                        <a-form-item label="图标" name="icon">
                            <a-select
                                v-model:value="form.icon"
                                placeholder="请选择图标"
                            >
                                <a-select-option value="private"
                                    >Private</a-select-option
                                >
                                <a-select-option value="public"
                                    >Public</a-select-option
                                >
                            </a-select>
                        </a-form-item>
                    </a-col>
                </a-row>
                <a-form-item label="状态" name="status">
                    <a-switch></a-switch>
                </a-form-item>
            </a-form>
            <template #footer>
                <a-button style="margin-right: 8px" @click="onCloseEdit"
                    >Cancel</a-button
                >
                <a-button type="primary" @click="onCloseEdit">Submit</a-button>
            </template>
        </a-drawer>
        <!--新增菜单  -->
        <a-drawer
            title="新增菜单"
            :width="720"
            :visible="addDrawer"
            :body-style="{ paddingBottom: '80px' }"
            :footer-style="{ textAlign: 'right' }"
            @close="onCloseAdd"
        >
            <a-form :model="form" :rules="rules" layout="vertical">
                <a-row :gutter="16">
                    <a-col :span="12">
                        <a-form-item label="菜单名称" name="name">
                            <a-input
                                v-model:value="form.name"
                                placeholder="请输入菜单名称"
                            />
                        </a-form-item>
                    </a-col>
                    <a-col :span="12">
                        <a-form-item label="父级菜单" name="url">
                            <a-input
                                v-model:value="form.url"
                                style="width: 100%"
                            />
                        </a-form-item>
                    </a-col>
                </a-row>
                <a-row :gutter="16">
                    <a-col :span="12">
                        <a-form-item label="组件路径" name="url">
                            <a-input
                                v-model:value="form.url"
                                placeholder="请输入组件路径"
                            >
                            </a-input>
                        </a-form-item>
                    </a-col>
                    <a-col :span="12">
                        <a-form-item label="图标" name="icon">
                            <a-select
                                v-model:value="form.icon"
                                placeholder="请选择图标"
                            >
                                <a-select-option value="private"
                                    >Private</a-select-option
                                >
                                <a-select-option value="public"
                                    >Public</a-select-option
                                >
                            </a-select>
                        </a-form-item>
                    </a-col>
                </a-row>
                <a-form-item label="状态" name="status">
                    <a-switch></a-switch>
                </a-form-item>
            </a-form>
            <template #footer>
                <a-button style="margin-right: 8px" @click="onClose"
                    >Cancel</a-button
                >
                <a-button type="primary" @click="onClose">Submit</a-button>
            </template>
        </a-drawer>
    </div>
</template>
<script>
import { message } from 'ant-design-vue'
import { getMenu } from '../../api'
import { reactive, ref } from 'vue'
export default {
    components: {},

    setup() {
        const addDrawer = ref(false)
        const tableData = ref()
        const editDrawer = ref(false)
        const toggleExpandChangeEvent = ({ row, expanded }) => {
            console.log(row)
            console.log('节点展开事件' + expanded)
        }
        const getMenuTree = () => {
            getMenu().then((r) => {
                const { code, msg, data } = r.data
                console.log('@@@', r)
                if (code != 200) {
                    message.error(msg)
                }
                tableData.value = data
            })
        }
        getMenuTree()
        const form = reactive({
            name: '',
            url: '',
            owner: '',
            type: '',
            approver: '',
            dateTime: '',
            description: '',
        })
        const rules = {
            name: [
                {
                    required: true,
                    message: 'Please enter user name',
                },
            ],
            url: [
                {
                    required: true,
                    message: 'please enter url',
                },
            ],
            owner: [
                {
                    required: true,
                    message: 'Please select an owner',
                },
            ],
            type: [
                {
                    required: true,
                    message: 'Please choose the type',
                },
            ],
            approver: [
                {
                    required: true,
                    message: 'Please choose the approver',
                },
            ],
            dateTime: [
                {
                    required: true,
                    message: 'Please choose the dateTime',
                    type: 'object',
                },
            ],
            description: [
                {
                    required: true,
                    message: 'Please enter url description',
                },
            ],
        }

        // 编辑菜单
        const editMenu = () => {
            editDrawer.value = true
        }
        const onCloseEdit = () => {
            editDrawer.value = false
        }
        // 关闭抽屉
        const onClose = () => {
            addDrawer.value = false
        }
        const onCloseAdd = () => {
            addDrawer.value = false
        }
        const showAddDrawer = () => {
            addDrawer.value = true
        }
        return {
            form,
            editDrawer,
            showAddDrawer,
            rules,
            onClose,
            onCloseEdit,
            tableData,
            onCloseAdd,
            addDrawer,
            toggleExpandChangeEvent,
            editMenu,
        }
    },
}
</script>

<style scoped lang="less"></style>
